<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/popup.css"/>
        <link rel="stylesheet" type="text/css" href="../css/kapiform.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/kapi.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.rateit.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/easypaginate.js"></script>

        <script type="text/javascript" language="javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                $j('.del').live("click",function(){  
                    $j(this).prev().parent().css("display","none");
                       
                    $j(this).prev().parent().prev().show();
                    $j(this).prev().parent().prev().prev().show();
                        
                });
                $j('.showCombo').live("click",function(){  
                    $j(this).prev().hide();
                    $j(this).hide();
                    $j(this).next().css("display","block");
                        
                });
                $j('.combo').live('click',function(){
                    $j('.listDD').hide();
                    if($j(this).next().hasClass('active')){
                        
                        $j('.listDD').removeClass('active');
                    }else{

                        $j('.listDD').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().show();
                        $j(this).next().children().next().show();
                        return false;
                    }
                });
                    
                $j('.itemList').live("click",function(){  
                        
                        
                    action = $j(this).attr('lang');
                  
                    PN00P = $j(this).parent().attr('lang');
                    //                        alert(action);
                    //                        alert(fv050);
                    $j.post("actionrelations.jsp"+action,function(data){
                        if(data!=0){
                            lDateTime1 = new Date().getTime();  
                            window.location= "customer.jsp?action=linkCus&pnPN100="+PN00P+"&tab=tab9"+PN00P+"&flag="+lDateTime1+"&#"+PN00P;
                        }else{data==0}{
                                
                        }
                    });
                        
                });
                $j('.itemList0').live("click",function(){  
                        
                        
                    action = $j(this).attr('lang');
                  
                    PN00P = $j(this).parent().attr('lang');
                    //                        alert(action);
                    //                        alert(fv050);
                    $j.post("actionrelations.jsp"+action,function(data){
                        if(data!=0){
                            lDateTime1 = new Date().getTime();  
                            window.location= "customer.jsp?action=linkCus&pnPN100="+PN00P+"&tab=tab9"+PN00P+"&flag="+lDateTime1+"&#"+PN00P;
                        }else{data==0}{
                                
                        }
                    });
                        
                });
                $j('.listDD').css("display","none");
                $j(document).live("click",function() {
                    $j('.listDD').hide();
                });

                $j('.listDD').live('click',function(e) {
                    e.stopPropagation();
                });
            });
        </script>
        <style type="text/css">
            .blue{
                background: #E0EFFC;
            }
            .white{
                background:#FFFFFF;
            }
            #ui-datepicker-div
            {
                z-index: 9999999;
            }
            .record_row_left a:hover{color:black}
            .odd{
                background: #F2F7FC;
            }
            #fancybox-wrap{

            }
            .fields_input{
                float: left;
                margin-top: 8px;
                width: 100%;
            }
            .button-link{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:134px;
                float:right;
                margin:19px 0 10px 0;
                color:#ffffff;
                font-size:14px;
                font-weight:bold;
                cursor:pointer;
                border-radius:5px;
                box-shadow:0 2px 3px #666666;
                padding:8px 0;
                text-transform:uppercase;
            }
            .customer-box{
                float:left; width:604px; margin-left:25px;
                border:1px solid #CCCCCC;
                padding:18px 0px 10px 0px;
                background: #E5E8EA;
                border-top: none;

            }
            .customer-box label{
                width:90px;
                text-align: right;
                float:left;
            }
            input{
                float:left;
                margin-left:9px;
            }
            select{
                float:left;
                height: 21px;
                width:166px;
                margin-left:9px;
            }
            .ui-datepicker-header select{
                width:45% !important;
            }
            .header-box{
                margin-left:25px;
                color:#263340;
                margin-top:10px;
                float: left;
                cursor:pointer;
                padding:4px 0px 0px 4px; 
                width:600px;
                border:1px solid #CCCCCC;
                font-size:12px;
                background: #D4D7D8;
                height: 21px;
                font-weight: bold;
            }
            .fixdate .ui-datepicker-trigger  { margin-left: 4px;}

            .boder-bomttom{

            }
            .buttonsearch{
                border:0;
                background:url(../images/btn_search.png) repeat-x;
                width:30px !important; height:30px;
                color:#ffffff;
                cursor:pointer;
                text-transform:uppercase;
            }
            .mail_sms{
                float: right;
                margin-right: -19px;
                margin-top: 5px;
            }
            /*                .buttonsave {
                                background: url("../images/button_left.gif") repeat-x scroll 0 0 transparent;
                                border: 0 none;
                                color: white;
                                cursor: pointer;
                                float: left;
                                font-size: 10px;
                                font-weight: bold;
                                height: 13px;
                                margin-bottom: 5px;
                                margin-right: 20px;
                                margin-top: 3px;
                                padding: 3px 7px;
                                text-transform: uppercase;
                                width: auto;
                            }*/
            .mesage{
                color: red;
                float: left;
                margin-left: 252px;
                margin-top: 20px;
                text-transform: uppercase;

            }

            .mesage123{
                bottom: 15px;
                color: red;
                float: left;

                margin-top: 20px;
                position: absolute;
                text-align: center;
                text-transform: uppercase;
                width: 100%;

            }
            .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
            .buttonsearch:hover .group{display: block !important;}

        </style>
        <style type="text/css">
            #fancybox-wrap{

            }
            .button-link{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:134px;
                float:right;
                margin:19px 0 10px 0;
                color:#ffffff;
                font-size:14px;
                font-weight:bold;
                cursor:pointer;
                border-radius:5px;
                box-shadow:0 2px 3px #666666;
                padding:8px 0;
                text-transform:uppercase;
            }
            div.rateit div.rateit-reset {

                width:0px !important;
            }

            .buttonsearch{
                border:0;
                background:url(../images/btn_search.png) repeat-x;
                width:30px; height:30px;
                color:#ffffff;
                cursor:pointer;
                text-transform:uppercase;
            }

            .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
            .buttonsearch:hover .group{display: block !important;}
            .buttonsearch2{
                border:0;
                background:url(../images/bg_submit.gif) repeat-x;
                width:68px;

                margin:0px 0 10px 20px;
                color:#ffffff;
                font-size:12px;
                font-weight:bold;
                cursor:pointer;
                border-radius:2px;
                padding:4px 0;
                text-transform:uppercase;
            }

            .ui-datepicker-header select{
                width:45% !important;
            }
            .greyRow{
                background: #E0EFFC;
            }
            .buttonsearch12 {
                background: url("../images/btn_search.png") no-repeat scroll 7px 4px white;
                border: 0 none;
                color: #FFFFFF;
                cursor: pointer;
                float: left;
                height: 20px;
                margin-left: 682px;
                margin-top: 1px;
                position: absolute;
                text-transform: uppercase;
                width: 28px;}
            .addTour1{
                background: url("../images/icon_addTour.png") repeat scroll 0 0 transparent;
                border-radius: 3px 3px 3px 3px;
                float: left;
                height: 22px;
                margin-left: 10px;
                margin-right: -140px;
                margin-top: 0;
                position: relative;
                width: 27px;
            }
            .abc img{
                width: 20px !important;
                height:  20px !important
            }
            .sei{
                width:100px;
            }
            .showCombo{
               float: right;
    height: 15px;
    margin-right: 10px;
    width: 10px;

            }

            .showCombo img{
                width: 10px !important; 
                height: 10px !important;
                float:left;
                margin-left: 5px;
                margin-top: 3px;
                cursor: pointer;
            }
            .combo{
                height: 22px;
                width: 104px;
                float: left;
            }

            .combo img{
                height: 25px !important;
                margin-top: -1px;
                width: 20px !important;
            }
            .listDD{
                background-color: #FFFFFF;
                border: 1px solid gray;
                margin-left: 9px;
                position: absolute;
                width: 91px;
                z-index: 999;
            }
            .itemList{
                cursor: pointer;
                float: left;
                width:91px;
            }

            .itemList0{
                cursor: pointer;
                float: left;
                width:91px;
            }
            .itemList:hover{
                background-color: #1491E5;
                color: #FFFFFF;
            }
            .itemList0:hover{
                background-color: #1491E5;
                color: #FFFFFF;
            }
            .del{
                cursor: pointer;
                float: left;
            }
            .del img{
                width: 10px;
                height: 10px;
            }
            .DD{
              margin-left: 81px;
    width: 55px;

            }

        </style>

    </head>

    <body>
        <f:view>
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <a4j:form >
                <div class="content_detail">
                    <div class="list_item_user">
                        <div class="item_content" style="display: block">
                            <div class="infomation_form">
                                <h:inputHidden value="#{n070Controller.FN100P}" id="FN100P"/>
                                <div class="card_add">
                                    <h:outputLink  rendered="#{loginSession.right.COM_EMP_CRE}"    value="employeePersonalDD.jsp?action=addEmp&choisetab=1&flagform=3&step12=3&pn100P=#{n070Controller.FN100P}&height=250px&width=400px" styleClass="fancybox">
                                        <img src="../images/add_tab.png" alt="add" title="add" /> <h:outputText value="Thêm quan hệ"/>
                                    </h:outputLink>

<%--
                                    <h:outputLink style="color:#fff;float:right;margin-right:6px;"   value="popUpSendEmail.jsp?page=listEmployee&step=1&fk100reload=#{CustomerBean.fk100}&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new abc" id="thickbox3"  >
                                        <img src="../images/icon_email1.png" alt="Email" title="Gửi email"/>
                                    </h:outputLink>


                                    <h:outputLink style="color:#fff;float:right;margin-right:6px;"   value="sendMoreSMS.jsp?page=listEmployee&step=1&fk100reload=#{CustomerBean.fk100}&height=453&amp;width=741&amp;modal=true" styleClass="fancybox add_new abc"  >
                                        <img src="../images/icon_sms1.png" alt="SMS" title="Gửi SMS"/>
                                    </h:outputLink>
--%>    

                                </div>
                                <div style="float:left ; width:100%; min-height:110px;margin-bottom: 52px;">
                                    <div style="float:left; width:100%; min-height:100px; height:auto;">
                                        <rich:dataTable value="#{n070Controller.listALlN050}" var="item"

                                                        rows="50"
                                                        rowClasses="greyRow, whiteRow"

                                                        style=" margin-left:10px;width:98%"
                                                        width="50%" rowKeyVar="index"
                                                        id="table" >

                                            <rich:column style="width:25px;">
                                                <f:facet name="header">
                                                    <h:outputText value="#{locale.num1}" />
                                                </f:facet>
                                                <div style="width:25px; text-align: center">
                                                    <h:outputText value="#{index+1}" />

                                                </div>
                                            </rich:column>
<%--
                                            <rich:column style="width:25px;">
                                                <f:facet name="header">
                                                    <h:selectBooleanCheckbox styleClass="checkAll"/>
                                                </f:facet>
                                                <div style="width:25px; text-align: center" lang="<h:outputText value=""/> ">
                                                    <h:selectBooleanCheckbox styleClass="check_select" lang=""  />  

                                                </div>
                                            </rich:column>
--%>
                                            <rich:column style="width:150px"  >
                                                <f:facet name="header">
                                                    <h:outputText value="#{locale.frist_lastname}" />
                                                </f:facet>

                                                <div style="width:150px; text-align: left">
                                                     <a href='customer.jsp?action=linkCus&pnPN100=<h:outputText value="#{item.fn100p}"/>&type=<h:outputText value="#{item.ni104p}"/>'><h:outputText value="#{item.hotenp}" /></a>
                                                    

                                                </div>
                                            </rich:column >
                                            <rich:column style="width:110px"  >
                                                <f:facet name="header">
                                                    <h:outputText value="Quan hệ" />
                                                </f:facet>

                                                <div style="width:100%; text-align: left">
                                                    <h:panelGroup rendered="#{item.pn050 !=0}"><div class="sei"><h:outputText styleClass="DD" style="float:left;" value="#{item.nv051}"/></div><div class="showCombo"><h:graphicImage value="../images/up.png"/></div></h:panelGroup>
                                                    <h:panelGroup rendered="#{item.pn050 ==0}">
                                                        <div class="combo"> <h:inputText styleClass="itemitem" style="float:left;width:74px;" value="#{item.pleasechoose}"/><h:graphicImage styleClass="float:left" value="../images/iconCombo1.png"/></div>
                                                        <div class="listDD" lang="<h:outputText value="#{item.fn100p}"/>">
                                                            <div class="itemList0" lang="<h:outputText value="?action=checkupdaterelations&PN050=0&PN100P=#{item.fn100p}&PN100C=#{item.fn100c}"/>"><h:outputText  value="Vui lòng chọn"/></div>
                                                            <a4j:repeat value="#{n070Controller.listitemrelations}" var="cus">
                                                                <div class="itemList" lang="<h:outputText value="?action=checkupdaterelations&PN050=#{cus.val}&PN100P=#{item.fn100p}&PN100C=#{item.fn100c}"/>"><h:outputText  value="#{cus.label}"/></div>
                                                            </a4j:repeat>
                                                        </div>
                                                    </h:panelGroup>

                                                    <div class="abcdemo" lang="<h:outputText value="1234"/>" style="display: none">
                                                        <div class="combo"> <h:inputText  style="float:left;width:74px;" value="#{item.pleasechoose}"/><h:graphicImage styleClass="float:left" value="../images/iconCombo1.png"/></div>
                                                        <div class="listDD" lang="<h:outputText value="#{item.fn100p}"/>">
                                                            <div class="itemList0" lang="<h:outputText value="?action=checkupdaterelations&PN050=0&PN100P=#{item.fn100p}&PN100C=#{item.fn100c}"/>"><h:outputText  value="Vui lòng chọn"/></div>
                                                            <a4j:repeat value="#{n070Controller.listitemrelations}" var="cus">
                                                                <div class="itemList" lang="<h:outputText value="?action=checkupdaterelations&PN050=#{cus.val}&PN100P=#{item.fn100p}&PN100C=#{item.fn100c}"/>"><h:outputText  value="#{cus.label}"/></div>
                                                            </a4j:repeat>
                                                        </div>
                                                        <div class="del"><h:graphicImage value="../images/delete_2.png"/></div>
                                                    </div>

                                                </div>
                                            </rich:column >
                                            <rich:column style="width:150px"  >
                                                <f:facet name="header">
                                                    <h:outputText value="Họ tên" />
                                                </f:facet>

                                                <div style="width:150px; text-align: left">
                                                    <a href='customer.jsp?action=linkCus&pnPN100=<h:outputText value="#{item.fn100c}"/>&type=<h:outputText value="#{item.ni104}"/>'> <h:outputText value="#{item.hotenc}" /></a>

                                                </div>
                                            </rich:column>
                                            <rich:column style="width:35px;">
                                                <f:facet name="header">
                                                    <h:outputText value="" />
                                                </f:facet>
                                                <h:outputLink    value="" styleClass="fancybox">
                                                    <img title="edit" alt="edit" src="../images/edit.png">
                                                </h:outputLink>
                                                <h:outputLink    value="delete.jsp?id=#{item.fn100p}&flag=N070&id2=#{item.fn100c}&height=150px&width=300px" styleClass="fancybox">
                                                    <img src="../images/delete_1.png" alt="delete"  title="delete" />
                                                </h:outputLink>
                                            </rich:column>
                                        </rich:dataTable>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </a4j:form>
        </f:view>
    </body>
</html>